<template>
  <div class="parent">
    <div class="child">child</div>
  </div>
</template>

<script lang="ts" setup>
var str1 = 11;
var str2 = 22;
console.log(`1111 str1,str2`, str1,str2)
function changeValue (a,b) {
  var temp = a;
  a = b;
  b= temp;
  console.log(`2222 a,b`, a,b)
}
changeValue(str1,str2)
console.log(`2222 str1,str2`, str1,str2)


</script>
<style lang="scss">
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid #f00;
  // 垂直居中1
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // 垂直居中2
  // position: relative;
  // 垂直居中3
  // position: relative;
  // 垂直居中4
  // display: grid;
  // 垂直居中5
  // display: table-cell;
  // vertical-align: middle;
  // text-align: center;
  // 垂直居中6
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  background: #f99;
  // 垂直居中2
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0px;
  // margin: auto;
  // 垂直居中3
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  // 垂直居中4
  // margin: auto;
  // 垂直居中5
  // margin: auto;
  // display: inline-block;
  // 垂直居中6
  margin: auto;
}

</style>